import { Avatar, Button, Grid, withStyles, } from '@material-ui/core';
import { inject, observer } from 'mobx-react';
import React, { Component } from 'react';
import { deepOrange, deepPurple } from '@material-ui/core/colors';
import FloorDetails from './FloorDetails';
import MyAvatar from './common/MyAvatar';
import ReplyButton from './common/ReplyButton';
import Header from './Header';

const style = {
    purple: {
        backgroundColor: deepPurple[500],
    }
}

@withStyles(style)
@inject("baseStore")
@observer
class EssayDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            essay: {},
            iFrameHeight: "",
            commentList: []
        }
    }

    getEssayDetails = () => {
        let path = this.props.location.pathname.split("/");
        let id = path[2];
        const res = this.props.baseStore.getEssayDetails(id);
        res.then((r) => {
            if (r.code === 200) {
                this.setState({ essay: r.data.essay });
            }
        });

        const res2 = this.props.baseStore.getCommentDetails(1, id);
        res2.then((r) => {
            if (r.code === 200) {
                console.log(r);
                this.setState({ commentList: r.data.commentList });
            }
        });
    }

    componentDidMount = () => {
        this.getEssayDetails();
    }

    first = (str) => {
        console.log("str:" + str)
        if (str === undefined) {
            return;
        }
        return str.substring(0, 1);
    }

    getMaxLevel = () => {
        const { essay } = this.state;
        let max = 0;
        if (essay.floor === undefined) {
            return;
        } else {
            for (let i = 0; i < essay.floor.length; i++) {
                if (max < essay.floor[i].level) {
                    max = essay.floor[i].level;
                }
            }
            return max;
        }
    }


    render() {
        const { essay, commentList } = this.state;
        let space = 20;
        return (
            <div>
                <Header {...this.props} />
                <div style={{ position: "relative", top: 70 }}>
                    <Grid container >
                        <Grid xs={1}></Grid>
                        <Grid xs={9}>
                            <div style={{ fontSize: 30, fontWeight: 800, marginBottom: 20 }}>{"[资讯] " + essay.title}</div>
                            {/* <div style={{height:20,width:20,float:"left"}}></div> */}
                            <MyAvatar author={essay.authorInfo} time={essay.updateTime} xs={8} />
                            <div dangerouslySetInnerHTML={{ __html: essay.content }} xs={9} />
                            <ReplyButton getEssayDetails={this.getEssayDetails} xs={11} tips={"回帖"}
                                type="1" belongId={essay.id} {...this.props} />
                            <span style={{ cursor: "pointer", fontSize: 10 }}>按最热排序</span>
                            <span style={{ cursor: "pointer", marginLeft: 20, fontSize: 10 }}>按最新排序</span>
                            <span style={{ cursor: "pointer", marginLeft: 100, fontSize: 10 }}>倒序</span>



                            {
                                commentList === undefined ? null : commentList.map((floor) => {
                                    return <FloorDetails floor={floor} getEssayDetails={this.getEssayDetails} />
                                })
                            }
                        </Grid>
                        <Grid xs={2}></Grid>
                    </Grid>


                </div>


            </div >
        );
    }
}

export default EssayDetails;